<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- 字体属性：大小、粗细、格式、样式 -->
    <style>
        /* 字体格式建议写成英文 */
        .font-family .one {
            font-family: 'Microsoft YaHei';
        }
        .font-family .two {
            font-family: '宋体';
        }

        /* 字体大小 */
        .font-size .big {
            font-size: 40px;
        }
        .font-size .small {
            font-size: 20px;
        }

        /* 字体粗细 */
        /* 可以使用数字表示粗细.  */
        /* 700 == bold, 400 是不变粗, == normal */
        /* 取值范围是 100 -> 900 */
        .font-size .big {
            font-weight: blod;
        }
        .font-size .small {
            font-weight: 400;
        }

        /* 样式文本 */
        /* 设置倾斜 font-style: italic */
        /* 取消倾斜 font-style: normal */
        /* 通常很少把文本变倾斜，但是会把em标签和i标签的倾斜变成不倾斜 */
        .font-size .big {
            font-style: normal;
        }
        .font-size .small {
            font-style: italic;
        }

        
    </style>
<body>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>

    <div class="font-size">
        <div class="big">
            大的大的
        </div>
        <div class="small">
            小的小的
        </div>
    </div>
    

</body>
</html>